<template>
  <!-- 公告详情 -->
  <el-dialog
    v-if="info"
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ info.title }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div
      class="content"
      v-html="info.content"
    ></div>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getNoticeDetailApi } from '@/service/common'

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}

//
const info = ref(null)
const getData = () => {
  getNoticeDetailApi(props.item.id).then(({ data }) => {
    info.value = data
  })
}

//
const init = () => {
  getData()
}
</script>

<style scoped lang="scss">
.content {
  height: 50vh;
  overflow: auto;
  word-break: break-all;
  white-space: pre-line;
}
</style>
